import React, { Component } from "react";

import { Routes, Route, Navigate } from "react-router-dom";

import News from "../News";
import Message from "../Message";
import MyNavLink from "../MyNavLink";

export default class Home extends Component {
    render() {
        return (
            <div>
                this is home
                <ul className="nav nav-tabs">
                    <li>
                        <MyNavLink to="news">news</MyNavLink>
                    </li>
                    <li>
                        <MyNavLink to="message">message</MyNavLink>
                    </li>
                </ul>
                <Routes>
                    <Route path="news" element={<News />}></Route>
                    <Route path="message/*" element={<Message />}></Route>
                    <Route path="" element={<Navigate to='news'/>}></Route>
                </Routes>
            </div>
        );
    }
}
